import React from 'react'
import ReactDOM from 'react-dom/client'

// const span = React.createElement('span', null, '我是一个span')

// const div = React.createElement('div', null, span)

const msg = 'hello react'
let flag = false
function isShow() {
  if (flag) {
    return '显示'
  } else {
    return '隐藏'
  }
}
const list = [
  {
    id: 0,
    title: '吃饭'
  },
  {
    id: 1,
    title: '睡觉'
  },
  {
    id: 2,
    title: '上钟'
  }
]
// 使用jsx创建虚拟DOM
const div = (
  <div>
    {/* 注解 */}
    <h1>1. 数据绑定</h1>
    <div>{msg}</div>
    <h1>2. 属性绑定</h1>
    <div msg={msg}>{msg}</div>
    <h1>3. 条件渲染</h1>
    <div>{isShow()}</div>
    <div>{flag ? '显示' : '隐藏'}</div>
    <h1>4.列表渲染</h1>
    {/* {list.map((item) => {
      return (
        <div>
          {item.id}----{item.title}
        </div>
      )
    })} */}

    {list.map((item) => (
      <div key={item.id}>
        {item.id}---{item.title}
      </div>
    ))}
  </div>
)

// jsx ---> 虚拟DOM

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(div)
